<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="Bookmark" href="/favicon.ico" >
    <link rel="Shortcut Icon" href="/favicon.ico" />
    <!--[if lt IE 9]>
    <script type="text/javascript" src="/static/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/static/lib/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui/css/H-ui.min.css" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/H-ui.admin.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/lib/Hui-iconfont/1.0.8/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/static/h-ui.admin/skin/default/skin.css" id="skin" />
    <link rel="stylesheet" type="text/css" href="/static/static/h-ui.admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="/static/css/common.css" />
    <!--[if IE 6]>
    <script type="text/javascript" src="__STATIC__/lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
    <title>必优甄选</title>
    <meta name="keywords" content="H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
    <meta name="description" content="H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。">
</head>
<style>
    html,
    body {
        height: 100%;
        margin: 0;
        width: 100%;
        padding: 0;
        overflow: hidden;
        font-size: 13px;
    }

    #container{height:230px; width: 750px; margin: 0 auto;margin-top: 10px}
    @media screen and (min-width: 1300px) {
        #container{height:500px; width: 75%; margin: 0 auto;margin-top: 10px}
    }
    #tip{width: 750px; margin: 0 auto;margin-top: 10px}
    @media screen and (min-width: 1300px) {
        #tip{width: 75%; margin: 0 auto;margin-top: 10px}
    }
    #tip1 {
        background-color: #fff;
        padding-left: 10px;
        padding-right: 10px;
        position: absolute;
        font-size: 12px;
        right: 10px;
        top: 120px;
        border-radius: 3px;
        border: 1px solid #ccc;
        line-height: 30px;
    }
</style>
<body>
<article class="page-container">

    <div id='tip' style="margin: 0 auto;">
        <div style="margin: 10px 0 20px 0">
            <input onClick="closeme2();"class="btn btn-primary radius" type="submit" value="确定">
            <input onClick="closeme1();"class="btn btn-primary radius" type="submit" value="返回">
        </div>
        <table class="table table-border" style="text-align: center">
            <tbody>
            <tr>
                <td>地址:</td>
                <td id="address"></td>
                <td>纬度:</td>
                <td id="lng"></td>
                <td>经度</td>
                <td id="lat"></td>
            </tr>
            </tbody>
        </table>

        <!--<div>-->
        <!--<div class='title'>选址结果</div>-->
        <!--<div class='c' id="lng">纬度:</div>-->
        <!--<div class='c' id="lat">经度:</div>-->
        <!--<div class='c'>地址:</div>-->
        <!--<div id='address'></div>-->
        <!--<div class='c'>最近的路口:</div>-->
        <!--<div id='nearestJunction'></div>-->
        <!--<div class='c'>最近的路:</div>-->
        <!--<div id='nearestRoad'></div>-->
        <!--<div class='c'>最近的POI:</div>-->
        <!--<div id='nearestPOI'></div>-->
        <!--</div>-->
    </div>

    <div id="container" class="map" tabindex="0"></div>

    <input type="hidden" id="userlocaltionid">
    <input type="hidden" id="userlocaltiontext">
    <input type="hidden" id="addresscode">

</article>
<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="__STATIC__/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="__STATIC__/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="__STATIC__/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<script type="text/javascript" src="__STATIC__/js/map/maps.js"></script>
<script type="text/javascript" src="__STATIC__/js/map/main.js"></script>
<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/jquery.validate.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/validate-methods.js"></script>
<script type="text/javascript" src="__STATIC__/lib/jquery.validation/1.14.0/messages_zh.js"></script>


<script type="text/javascript">
    AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {

        var map, geolocation;
        var map = new AMap.Map('container', {
            zoom:16,
            scrollWheel: false
        });

        /* AMap.plugin('AMap.ToolBar',function(){
         var toolbar = new AMap.ToolBar();
         map.addControl(toolbar)
         })*/
        AMap.plugin('AMap.Geolocation', function () {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 10000,          //超过10秒后停止定位，默认：无穷大
                maximumAge: 0,           //定位结果缓存0毫秒，默认：0
                convert: true,           //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
                showButton: true,        //显示定位按钮，默认：true
                buttonPosition: 'LB',    //定位按钮停靠位置，默认：'LB'，左下角
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
                showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
                panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
                zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            //AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位信息
            // AMap.event.addListener(geolocation, 'error', onError);      //返回定位出错信息
        });
        var positionPicker = new PositionPicker({
            mode: 'dragMap',//设定为拖拽地图模式，可选'dragMap'、'dragMarker'，默认为'dragMap'
            map: map //依赖地图对象
        });

        positionPicker.on('success', function(positionResult) {
            console.log(positionResult)
            document.getElementById('userlocaltionid').value=positionResult.position.lng+','+positionResult.position.lat;

            document.getElementById('userlocaltiontext').value=positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber;
            document.getElementById('addresscode').value=positionResult.regeocode.addressComponent.adcode;
            var str=['定位成功'];
            str.push(positionResult.regeocode.addressComponent.province+positionResult.regeocode.addressComponent.city+positionResult.regeocode.addressComponent.district+positionResult.regeocode.addressComponent.street+positionResult.regeocode.addressComponent.township+positionResult.regeocode.addressComponent.streetNumber);
            str.push(positionResult.position.lng);
            str.push(positionResult.position.lat);
            str.push( positionResult.regeocode.addressComponent.adcode);
            document.getElementById('lng').innerHTML = positionResult.position.lng;
            document.getElementById('lat').innerHTML = positionResult.position.lat;
            document.getElementById('address').innerHTML = positionResult.address;
        });
        positionPicker.on('fail', function(positionResult) {
            document.getElementById('userlocaltionid').value = ' ';
            document.getElementById('userlocaltiontext').value = ' ';
            document.getElementById('addresscode').value = ' ';
            document.getElementById('tip').innerHTML = ' ';
        });
        var onModeChange = function(e) {
            positionPicker.setMode(e.target.value)
        }
        /*var startButton = document.getElementById('start');
         var stopButton = document.getElementById('stop');
         var dragMapMode = document.getElementsByName('mode')[0];
         var dragMarkerMode = document.getElementsByName('mode')[1];
         AMap.event.addDomListener(startButton, 'click', function() {
         positionPicker.start(map.getBounds().getSouthWest())
         })
         AMap.event.addDomListener(stopButton, 'click', function() {
         positionPicker.stop();
         })
         AMap.event.addDomListener(dragMapMode, 'change', onModeChange)
         AMap.event.addDomListener(dragMarkerMode, 'change', onModeChange);*/
        positionPicker.start(map.getBounds().getSouthWest());
        map.panBy(0, 1);

        map.addControl(new AMap.ToolBar({
            liteStyle: true
        }))
    });

    //        确定
    function closeme2() {
        parent.$('#address').val($('#address').text())
        parent.$('#lng').val($('#lng').text())
        parent.$('#lat').val($('#lat').text())
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }

    //        取消
    function closeme1() {
        var index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(index);
    }
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>